<template>
	<view class="goodsDetails">
		<view class="cover">
			<!-- <image src="../../static/images/gugou/bg2.jpg" mode="widthFix"></image> -->
			<image :src="goodsInfo.cover" mode="widthFix"></image>
		</view>
		<view class="info">
			<view class="title">
				<view class="goodsName">
					{{goodsInfo.name}}
				</view>
				<view class="groupLink" @click="goGroupDetail">
					查看团详情>
				</view>
			</view>
			<view class="tags">
				<view class="tag" v-for="(item,index) in goodsInfo.tags" :key="index">
					{{item}}
				</view>
			</view>
			<view class="timeList">
				<view class="timeItem">
					<view class="timeDetail">
						开定时间
					</view>
					<view class="time">
						{{goodsInfo.startTime}}
					</view>
				</view>
				<view class="timeItem" style="align-items: center;">
					<view class="timeDetail">
						截定时间
					</view>
					<view class="time" v-if="!goodsInfo.isCreateUser">
						{{goodsInfo.cutTime}}
					</view>
					<view class="timePicker" style="margin-left: -54rpx;" v-if="goodsInfo.isCreateUser">
						<uni-datetime-picker v-model="goodsInfo.cutTime" :border="false" :clear-icon="false" @change="change"/>
					</view>
				</view>
				<view class="timeItem">
					<view class="timeDetail">
						尾款时间
					</view>
					<view class="time" v-if="!goodsInfo.isCreateUser">
						{{goodsInfo.finalPaymentTime}}
					</view>
					<view class="timePicker" style="margin-left: -54rpx;" v-if="goodsInfo.isCreateUser">
						<uni-datetime-picker v-model="goodsInfo.finalPaymentTime" :border="false" :clear-icon="false" @change="change"/>
					</view>
				</view>
			</view>
		</view>
		<view class="arrange"> 
			<view class="headLine"> 
				———————— 排谷详情 ————————
			 </view>
			<scroll-view class="roleList" scroll-x="true">
				<view class="roleItem" v-for="(item,index) in goodsInfo.goodsRoleDTOList" :key="index">
					<view class="roleName">
						<view class="">
							{{item.name}}
						</view>
						<view class="" style="color: red;">
							￥{{item.price}}
						</view>
					</view>
					<view class="userList">
						<view class="userList" v-for="(goodsBuyDetail,i) in goodsInfo.goodsBuyDetailList" :key="i">
							<view class="userItem" v-for="(user,j) in goodsBuyDetail.goodsBuyDTOList" :key="j"  v-if="goodsBuyDetail.goodsRoleId === item.id">
								<view class="usernum" v-for="(n) in user.expectBuyNum" :key="n" >
									<view class="circle userAvatar" >
										<image v-if="user.buyUserAvatar" :src="user.buyUserAvatar" mode="aspectFill"></image>
										<image v-else src="../../static/images/gugou/bg4.jpg" mode="aspectFill"></image>
									</view>
								</view>
							</view>
						</view>
						<view class="circle add" @click="chooseNum(item.id)">
							<image src="../../static/icons/add02.png" mode=""></image>
						</view>
					</view>
					<!-- <template v-for="(goodsBuyDetail) in goodsInfo.goodsBuyDetailList">
						<view class="userList">
							<view class="userItem" v-for="(user) in goodsBuyDetail.goodsBuyDTOList" v-if="goodsBuyDetail.goodsRoleId === item.id">
								<view class="circle userAvatar">
									<image v-if="user.buyUserAvatar" :src="user.buyUserAvatar" mode="widthFix"></image>
									<image v-else src="../../static/images/gugou/bg4.jpg" mode="widthFix"></image>
								</view>
								<view class="num">
									{{ user.expectBuyNum }}
								</view>
							</view> -->
							<!-- 为每个 goodsRoleId 只展示一次添加按钮 -->
							<!-- <view class="circle add" @click="chooseNum(item.id)">
								<image src="../../static/icons/add02.png" mode=""></image>
							</view>
						</view>
					</template> -->
				</view>
			</scroll-view>
			<view class="closeBtn">
				截排
			</view>
		</view>
		<!-- 点击加号图标弹出对话框 -->
		<view class="mask" v-if="dialogVisible">
			<view class="dialog">
				<view class="hd">
					<view class="title">
						请输入吃谷数量
					</view>
					<view class="back" @click='dialogVisible=false'>
						返回
					</view>
				</view>
				<view class="bd">
					<input type="number" style="height: 100%;" v-model="reserveRoleParams.expectBuyNum">
				</view>
				<view class="btn" @click="confirmGoods">
					确定
				</view>
			</view>
		</view>
		<view class="goodsImages">
			<view class="headLine">
				———————— 谷子详情 ————————
			</view>
			<view class="bg" v-for="(item,index) in goodsInfo.detailImgs" :key="index">
				<image :src="item" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {getGoodsDetail,reserveRole,getTruncationData,updateGoodsTime} from '@/api/goods.js'
	export default {
		onShow() {
			let pages=getCurrentPages()
			this.reserveRoleParams.goodsId=pages[pages.length-1].options.goodsId
			this.getGoodsDetails()
		},
		data() {
			return {
				dialogVisible:false,
				goodsInfo:{},
				reserveRoleParams:{
					goodsId:null,
					goodsRoleId:null,
					expectBuyNum:null,
				},
			};
		},
		methods:{
			chooseNum(roleId){
				this.dialogVisible=true
				this.reserveRoleParams.goodsRoleId=roleId
			},
			getGoodsDetails(){
				getGoodsDetail(this.reserveRoleParams.goodsId).then(res=>{
					if(res.data.code==200){
						this.goodsInfo=res.data.data
						// this.reserveRoleParams.groupId=this.goodsInfo.groupId
					}
				})
			},
			goGroupDetail(){
				uni.navigateTo({
					url:`/pages/groupDetails/groupDetails?groupId=${this.goodsInfo.groupId}`
				})
			},
			confirmGoods(){
				reserveRole(this.reserveRoleParams).then(res=>{
					if(res.data.code==200){
						this.getGoodsDetails()
						this.dialogVisible=false
					}else{
						uni.showToast({
							title:`${res.data.message}`,
							icon:'none'
						})
					}
				})
			},
			change(e){
				let data={
					id:this.reserveRoleParams.goodsId,
					cutTime:this.goodsInfo.cutTime,
					startTime:this.goodsInfo.startTime,
					finalPaymentTime:this.goodsInfo.finalPaymentTime
				}
				updateGoodsTime(data).then(res=>{
					if(res.data.code==200){
						this.getGoodsDetails()
					}else{
						uni.showToast({
							title:`${res.data.message}`,
							ison:'none'
						})
						this.getGoodsDetails()
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.goodsDetails{
	background-color: #E3F1F7;
	.cover{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		image{
			height: 100%;
		}
	}
	.info{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.title{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 38rpx;
			.groupLink{
				color: #86B9F8;
				font-size: 26rpx;
			}
		}
		.tags{
			display: flex;
			.tag{
				font-size: 26rpx;
				color: #347CD4;
				background-color: #E3F1F7;
				height: 30rpx;
				line-height: 30rpx;
				margin: 6rpx 12rpx;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
			}
		}
		.timeList{
			display: flex;
			flex-direction: column;
			.timeItem{
				display: flex;
				color: #4E4E4F;
				font-size: 28rpx;
				margin: 14rpx 20rpx;
				.timeDetail{
					width: 300rpx;
				}
			}
		}
	}
	.headLine{
		padding:30rpx;
		font-size: 30rpx;
		color: #cbcdd1;
		text-align: center;
	}
	.arrange{
		background-color: #fff;
		margin-bottom: 20rpx;
		padding-bottom: 25rpx;
		.roleList{
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			.roleItem{
				display: flex;
				margin-bottom: 20rpx;
				align-items: center;
				.roleName{
					display: flex;
					flex-shrink: 0;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 100rpx;
					text-align: center;
					// line-height: 100rpx;
					border: 1px solid #E3F1F7;
					padding: 0 20rpx;
					font-size: 28rpx;
				}
				.userList{
					display: flex;
					.circle{
						width: 80rpx;
						height: 80rpx;
						border: 1px solid #ddd;
						border-radius: 50%;
						margin: 0 20rpx;
						margin-right: 10rpx;
					}
					.add{
						display: flex;
						align-items: center;
						justify-content: center;
						image{
							width: 60rpx;
							height: 60rpx;
						}
					}
					.userItem{
						// position: relative;
						display: flex;
						.usernum{
							display: flex;
							.userAvatar{
								overflow: hidden;
								image{
									width: 105rpx;
									height: 105rpx;
								}
							}
						}
						
						
					}
				}
			}
		}
		.closeBtn{
			width: 90%;
			height: 70rpx;
			margin: 0 auto;
			line-height: 70rpx;
			border: 1px solid #75BEFA;
			font-size: 34rpx;
			color: #347CD4;
			border-radius: 40rpx;
			text-align: center;
		}
	}
	.mask{
		position: fixed;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-color: rgba(0, 0, 0, 0.5);
		  z-index: 9999;
		  .dialog{
			  position: fixed;
			  top: 35%;
			  left: 15%;
			  display: flex;
			  flex-direction: column;
			  justify-content: space-around;
			  padding: 30rpx;
			  background-color: #fff;
			  width: 500rpx;
			  height: 300rpx;
			  font-size: 32rpx;
			  .hd{
				  display: flex;
				  justify-content: space-between;
				  .back{
					  color: #347CD4;
				  }
			  }
			  .bd{
				  height: 80rpx;
				  background-color: #f8f8f8;
			  }
			 .btn{
				 color: #347CD4;
				 background-color: #E3F1F7;
				 height: 70rpx;
				 line-height: 70rpx;
				 border-radius: 35rpx;
				 text-align: center;
			 }
		  }
	}
	.goodsImages{
		background-color: #fff;
		.bg{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 10rpx;
		}
	}
}
</style>
